<template>
    <div>
        <!--        轮播图-->
        <Carousel/>
        <!--        首页搜索框-->
        <Search/>

        <!--        底部展示医院的结构-->
        <el-row :gutter="20">
            <el-col :span="20">
                <!--   首页等级-->
                <Lever @getLevel="getLevel"/>
                <!--       地区-->
                <Region @getRegion="getRegion"/>
                <!--展示医院的结构-->
                <div class="hospital" v-if="hasHospitalArr.length>0">
                    <Card  class="item" v-for="(item,index) in hasHospitalArr" :key="item.id" :hospitalInfo="item"/>
                </div>
                <el-empty v-else description="暂无数据~~~~~"/>
                <!--                分页器-->
                <el-pagination
                        v-model:current-page="pageNo"
                        v-model:page-size="pageSize"
                        :page-sizes="[10, 20, 30, 40]"
                        :background="true"
                        layout="prev, pager, next, jumper,sizes,total,"
                        :total="total"
                        @current-change="currentChange"
                        @size-change="sizeChange"
                />
            </el-col>
            <el-col :span="4">
<!--                侧边组件-->
                <Tip/>
            </el-col>

        </el-row>
    </div>
</template>

<script setup lang="ts">
// 引入首页轮播图组件
import Carousel from './carousel/index.vue'
import Search from './search/index.vue'
import Lever from './lever/index.vue'
import Region from './region/index.vue'
import Card from './card/index.vue'
import Tip from './tip/index.vue'
import {onMounted, ref} from "vue";
import {reqHospital} from "@/api/home";
import type {Content, HospitalResponseData} from "@/api/home/type.ts";


//分页器
//页码
let pageNo = ref<number>(1)
//一页展示的数据
let pageSize = ref<number>(10)
//存储已有的医院的数据
let hasHospitalArr = ref<Content>([])
//存储医院总个数
let total = ref<number>(0)
//存储等级信息
let hostype = ref<string>('')
//存储地区信息
let districtCode = ref<string>('')

// 组件挂载完毕，发一次请求
onMounted(() => {
    getHospitalInfo()
})

//获取已有的医院的数据
const getHospitalInfo = async () => {
    //获取医院数据：默认获取第一页，一页十个数据
    let result: HospitalResponseData = await reqHospital(pageNo.value, pageSize.value, hostype.value, districtCode.value)
    if (result.code == 200) {
        hasHospitalArr.value = result.data.content;
        total.value = result.data.totalElements;
    }
}

//分页器页码发生变化时的回调
const currentChange = () => {
    getHospitalInfo()
}
//分页器下拉菜单发生变化时触发
const sizeChange = () => {
    getHospitalInfo()
}

//子组件的自定义事件：获取子组件给父组件传递的level
const getLevel = (level: string) => {
    hostype.value = level
    getHospitalInfo()
}
//子组件的自定义事件：获取子组件给父组件传递的region
const getRegion = (region: string) => {
    districtCode.value = region
    getHospitalInfo()
}


</script>

<style scoped lang="scss">
.hospital {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 48%;
    margin: 10px 0;
  }
}
</style>